<template>
  <div class="main">
    <span @click="delBranch" class="sector"><i class="MC_iconfont MC_icon-zhuangtai-guanbi"></i></span>
    <el-form class="m7-form" label-position="top" :model="data" size="mini" ref="form">
      <el-form-item label="分支名" :rules="{ required: true, message: '请输入分支名' }" prop="name">
        <el-input style="margin-bottom: 10px" @input="getName" v-model.trim="data.name"></el-input>
      </el-form-item>
      <div class="queryConditions">
        <div class="andConditions">
          <!-- <span>且</span> -->
          <div class="ConditionsList">
            <div class="Conditions" v-for="(item, index) in data.conditions" :key="index + 'condition'">
              <!-- <el-row :gutter="20"> -->
              <el-form-item
                style="flex: 3; margin-right: 10px"
                :rules="{ required: true, message: '请输入' }"
                :prop="'conditions.' + index + '.k'"
              >
                <el-cascader
                  style="width: 100%"
                  v-model="item.k"
                  filterable
                  :options="cascadeList"
                  @change="(e: any) => getCascade(e, item)"
                  :props="caProps"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item
                style="flex: 1; margin-right: 10px"
                :rules="{ required: true, message: '请输入', trigger: 'change' }"
                :prop="'conditions.' + index + '.op'"
              >
                <el-select
                  filterable
                  style="width: 100%; min-width: 107px"
                  v-model="item.op"
                  @change="opChange($event, index)"
                >
                  <el-option
                    v-for="item in (sankList as any).filter((i: any) => (system.includes(item.k) ? i.type : true))"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="!['empty', 'nempty'].includes(item.op)"
                style="flex: 2"
                :prop="'conditions.' + index + '.v'"
              >
                <el-input
                  v-if="!['empty', 'nempty', 'in', 'nin', 'between', 'notbetween'].includes(item.op)"
                  v-model.trim="item.v"
                ></el-input>
                <div v-if="['in', 'nin', 'between', 'notbetween'].includes(item.op) && data.valueList?.[index]">
                  <el-input
                    style="margin-bottom: 5px; width: 80%"
                    v-for="(i, q) in data.valueList[index]"
                    :key="'input' + q"
                    v-model.trim="item.v[q]"
                  >
                    <template #suffix>
                      <i
                        v-if="['in', 'nin'].includes(item.op)"
                        style="cursor: pointer"
                        @click="delVal(index, q)"
                        class="MC_iconfont MC_icon-shanchu1-xian"
                      ></i>
                    </template>
                  </el-input>
                  <span
                    style="cursor: pointer; margin-left: 3px"
                    v-if="['in', 'nin'].includes(item.op)"
                    @click="addVal(index)"
                    ><i class="MC_iconfont MC_icon-tianjia-xian add-span"></i
                  ></span>
                </div>
              </el-form-item>

              <!-- </el-row> -->
              <span
                style="display: inline-block; margin-left: 10px; cursor: pointer"
                v-if="data.conditions.length > 1"
                @click="delConditions(index)"
                ><i class="MC_iconfont MC_icon-shanchu2-xian delete-span"></i
              ></span>
            </div>
            <div>
              <span style="cursor: pointer" @click="addConditions"
                ><i class="MC_iconfont MC_icon-tianjia-xian add-span"></i>添加条件</span
              >
            </div>
          </div>
        </div>
        <!-- <div class="straightLine"></div>
        <div class="orConditions">

        </div> -->
        <el-form-item>
          <el-radio v-model="data.operator" label="and">满足所有条件</el-radio>
          <el-radio v-model="data.operator" label="or">满足任意条件</el-radio>
        </el-form-item>
        <el-form-item label="分支转向">
          <template v-slot:label>
            <span>
              分支转向
              <el-tooltip :show-after="500" class="item" effect="dark" content="不选则视为挂断" placement="top">
                <span class="MC_iconfont MC_icon-yiwen-mian tip-span"></span>
              </el-tooltip>
            </span>
          </template>
          <el-select
            v-model="data.condition.to"
            placeholder="请选择下一步节点"
            @change="getTo"
            clearable
            style="width: 100%; margin-top: 10px"
          >
            <el-option
              v-for="(node, index) in nodeList"
              :label="node.data.name"
              :value="node.id"
              v-show="!node.viewOnly && node.id !== currentData.id && node.id !== 'startNode'"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { withDefaults, defineProps, reactive, computed, defineEmits, onMounted, onBeforeMount, toRefs, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
interface Data {
  name: string
  operator: string
  next: string
  conditions: any[]
  valueList: any[]
  condition: any
}
interface Condition {
  label: string
  to: string
  value: string
}

interface State {
  valueList: number[]
  condition: Condition | Record<string, unknown>
  system: string[]
  caProps: Record<string, unknown>
}
const props = withDefaults(
  defineProps<{
    cascadeList: any
    data: Data
    condition: Condition
    nodeList: any[]
    currentData: any
    id: any
  }>(),
  {
    cascadeList: []
  }
)

const state: State = reactive({
  valueList: [],
  condition: {},
  system: ['superUniqueId', 'callType', 'displayNumber', 'trunkNumber'],
  caProps: { label: 'memo', value: 'key', emitPath: false }
})

const form = ref(null)

const emits = defineEmits<{
  (e: 'delBranch', id: any): void
}>()

const sankList = computed(() => [
  { value: 'eq', label: '等于', type: 1 },
  { value: 'neq', label: '不等于', type: 1 },
  { value: 'in', label: '包含', type: 1 },
  { value: 'nin', label: '不包含', type: 1 },
  { value: 'empty', label: '为空' },
  { value: 'nempty', label: '不为空' },
  { value: 'gt', label: '大于' },
  { value: 'gte', label: '大于或等于' },
  { value: 'lt', label: '小于' },
  { value: 'lte', label: '小于或等于' },
  { value: 'between', label: '在范围内' },
  { value: 'notbetween', label: '不在范围内' }
])

onBeforeMount(() => {
  if (!props.data.condition) {
    props.data.condition = { label: props.data.name, to: props.data.next, value: '' }
  }
})

onMounted(() => {
  props.data.valueList = []
  props.data.conditions.forEach((element, index) => {
    let val
    if (['in', 'nin', 'between', 'notbetween'].includes(element.op)) {
      val = new Array(element.v.length).fill(1)
    } else {
      val = []
      element.v = Array.isArray(element.v) ? element.v[0] : element.v
    }
    props.data.valueList[index] = val
  })
})

const addConditions = () => {
  if (props.data.conditions.length >= 10) {
    ElMessage.error('最多添加十个')
    return
  }
  props.data.conditions.push({
    k: '',
    op: '',
    v: '',
    to: ''
  })
}

const delConditions = (index: number) => {
  props.data.conditions.splice(index, 1)
}

const getCascade = (val: any, item: any) => {
  item.op = ''
  if (props.cascadeList.find((i: any) => i.memo !== '系统参数')?.children.find((i: any) => i.key === val)) {
    item.varType = 'custom'
  } else {
    item.varType = ''
  }
}

const getName = () => {
  state.condition.label = props.data.name
}

const delBranch = () => {
  emits('delBranch', props.id)
}

const getTo = (val: any) => {
  props.data.next = val
}

const opChange = (val: string, index: number) => {
  if (!props.data.valueList) {
    props.data.valueList = []
  }
  if (val === 'in' || val === 'nin') {
    props.data.valueList[index] = []
    props.data.valueList[index].push(1)
    props.data.conditions[index].v = []
  } else {
    if (val === 'between' || val === 'notbetween') {
      props.data.valueList[index] = []
      props.data.valueList[index].push(1, 1)
      props.data.conditions[index].v = ['', '']
    } else {
      console.log(props)
      props.data.valueList[index] = []
      props.data.conditions[index].v = ''
    }
  }
}

const addVal = (index: number) => {
  props.data.valueList[index].push(1)
}

const delVal = (i: number, q: number) => {
  props.data.valueList[i].splice(q, 1)
  props.data.conditions[i].v.splice(q, 1)
}

// eslint-disable-next-line no-undef
defineExpose({
  form: form
})
const { system, caProps } = toRefs(state)
</script>
<style lang="stylus" scoped>
.main
  width: calc(50vw - 100px);
  background: #F8FAFD;
  border-radius: 4px;
  padding 16px
  margin-bottom: 16px
  position relative

// .andConditions
//   display: flex
.Conditions
  display: flex
.add-span
  font-size 12px
  cursor pointer
  &:before
    margin-right 4px
.straightLine
  height: 1px
  width: 100%
  background: #F2F3F4;
  position relative
  margin: 14px 0
  &:before
    content: '或'
    position absolute
    padding: 0 20px
    transform: translateX(248px) translateY(-50%);
    background: #F8FAFD;
.sector
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 16px 0 0;
  height: 16px
  width 16px
  transform: rotateY(180deg) rotateX(180deg);
  background: #FC6B5C
  cursor pointer
  display: none
  i
    position relative
    font-size: 12px
    color: #fff
    top: -5px
.main:hover .sector
  display: block
.tip-span
    color $icon-gray
    cursor pointer
    margin-left 4px
    font-size 14px
</style>
